<script setup lang="ts">
import { defineAsyncComponent, computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
import { useMask } from '@/hooks/reno14-pro.ts'

const [ScrollMask] = useMask({
  maskZIndex: 35,
  bgColor: '#000',
})

const Mo = defineAsyncComponent(() => import('./mo/index.vue'))
const Pad = defineAsyncComponent(() => import('./pad/index.vue'))
const Pc = defineAsyncComponent(() => import('./pc/index.vue'))
const { width } = useWindowSize()
const comp = computed(() => {
  if (width.value < 768) {
    return Mo
  } else if (width.value < 1024) {
    return Pad
  } else {
    return Pc
  }
})
</script>

<template>
  <ScrollMask>
    <div class="block4_container">
      <keep-alive>
        <component :is="comp" />
      </keep-alive>
    </div>
  </ScrollMask>
</template>

<style scoped>
@reference "@/assets/main.css";

.block4_container {
  @apply relative z-30 bg-black text-white rounded-t-4xl;
}
</style>
